<template>
  <div class="waitConfirmed">
    <div class="searchBox">
      <Form label-position="right" :label-width="130" class="search-form">
        <Row>
          <Col span="5">
            <FormItem label="设备类别：">
              <Select
                v-model="category.key"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                  v-for="(item, index) of category"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="检测项目：">
              <Input
                type="text"
                v-model="text"
                :placeholder="`${$t('common.inputInfo')}`"
                class="inputBorder"
                :maxlength="32"
              ></Input>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="检测周期：">
              <Select
                v-model="cycle.key"
                filterable
                clearable
                :placeholder="`${$t('common.inputInfo')}`"
              >
                <Option
                  v-for="(item, index) of cycle"
                  :value="item.key"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="5" style="display: flex; justifyContent: space-around">
            <Button type="primary">{{$t('common.Query')}}</Button>
            <Button><Icon type="ios-paper-outline" />批量修改</Button>
            <Button><Icon type="ios-trash-outline" />批量删除</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table
        ref="selection"
        :columns="columns"
        :data="data"
        @on-selection-change="onSelectChange"
      >
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="confirm(row)">{{$t('maintenance.Confirmed')}}</span>
          <span class="operationBtn" @click="edit(row)">{{$t('common.Edit')}}</span>
          <span class="operationBtn" @click="deleteRow(row)">{{$t('common.Delete')}}</span>
        </template>
      </Table>
    </div>
    <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="`${$t('maintenance.Deleteremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span
            >删除后不会影响已经生成的检测任务，但不会继续生成任务，是否确认删除？</span
          >
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/pair.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span>确认后检测项目生效，是否确认？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="confirmFaultCodeShowF = false"
          >{{$t('common.Cancle')}}</Button
        >
        <Button type="primary" @click="deleteOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="create" title="修改检测项目" width="1000">
      <addModal></addModal>
      <div slot="footer">
        <Button type="default" @click="create = false">{{$t('common.Cancle')}}</Button>
        <Button type="primary" @click="addOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <div class="pageWrap">
      <Page
        :total="total"
        :page-size="pageSize"
        :page-size-opts="$variable.pageSizes"
        :current="pageNum"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        show-sizer
        show-total

      />
    </div>
  </div>
</template>

<script>
import addModal from '../../../maintain/modal/addModal'
export default {
  name: "waitConfirmed",
  components: {
    addModal
  },
  data() {
    return {
      text: "",
      total: 64,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      allCheck: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      confirmFaultCodeShowF: false,
      create: false,
      formItem: {},
      classification: [
        { name: "CNC", key: "CNC" },
        { name: "PLC", key: "PLC" },
        { name: "IPC", key: "IPC" },
      ],
      period: [
        { name: "月度", key: "month" },
        { name: "季度", key: "quarter" },
        { name: "年度", key: "year" },
      ],
      category: [
        { name: "全部", key: "" },
        { name: "CNC", key: "CNC" },
        { name: "PLC", key: "PLC" },
        { name: "IPC", key: "IPC" },
      ],
      cycle: [
        { name: "全部", key: "" },
        { name: "日", key: "day" },
        { name: "周", key: "week" },
        { name: "月度", key: "month" },
        { name: "季度", key: "quarter" },
        { name: "半年度", key: "halfYear" },
        { name: "年度", key: "year" },
      ],
      columns: [
        { type: "selection", width: 60 },
        { title: "设备类别", key: "category" },
        { title: "检测位置", key: "position" },
        { title: "检测分类", key: "classification" },
        { title: "检测周期", key: "cycle" },
        { title: "检测项目", key: "content" },
        { title: "检测方法", key: "function" },
        { title: "单位", key: "company" },
        { title: "上限", key: "up" },
        { title: "下限", key: "down" },
        { title: "创建人", key: "creater" },
        { title: "审核人", key: "reviewer" },
        { title: `${ this.$t('common.operation') }`, slot: "action", width: 200, align: "center" },
      ],
      data: [
        {
          category: "CNC",
          position: "主轴",
          classification: "润滑",
          cycle: "日",
          content: "油枪，润滑脂",
          function: "润滑",
          creater: "孙海新",
          reviewer: "孙海新",
        },
        {
          category: "CNC",
          position: "主轴",
          classification: "润滑",
          cycle: "日",
          content: "油枪，润滑脂",
          function: "润滑",
          creater: "孙海新",
          reviewer: "孙海新",
        },
        {
          category: "CNC",
          position: "主轴",
          classification: "润滑",
          cycle: "日",
          content: "油枪，润滑脂",
          function: "润滑",
          creater: "孙海新",
          reviewer: "孙海新",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onSelectChange(selection) {
      console.log(selection);
      // let myArray = [];
      // selection.map((item) => {
      //   myArray.push({ id: item.id });
      // });

      // this.delIds = myArray;
      // if (selection.length > 1) {
      //   this.allCheck = true;
      // } else {
      //   this.allCheck = false;
      // }
    },
    deleteOk() {},
    confirm(row) {
      //点击展示提示删除弹窗
      this.confirmFaultCodeShowF = true;
      console.log(row, "row");
    },
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      console.log(row, "row");
    },
    edit() {
      this.create = true;
    },
    addOk() {},
    changePageNum() {},
    changePageSize() {},
  },
};
</script>

<style scoped lang="scss">
.waitConfirmed {
  .pageWrap {
    text-align: right;
  }
}
</style>
